<template>
    <div>
        <Row type="flex" justify="space-between" style="margin-bottom: 10px">
            <div>
                <span>考勤月份</span>
                <Select v-model="year" style="width: 80px" placeholder="年">
                    <Option v-for="item in years" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Select v-model="month" style="width: 80px" placeholder="月">
                    <Option v-for="item in months" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <span class="margin-left-10">部门</span>
                <Select v-model="departId" style="width: 150px">
                    <Option v-for="item in departments" :value="item.value" :key="item.value">{{item.label}}</Option>
                </Select>
                <Button icon="ios-search" type="primary" @click="loadTableData" style="margin-right:3px">查询</Button>
            </div>
            <div>
                <Input v-model="queryWord" placeholder="请输入姓名..."
                       style="width: 150px;margin-right:3px"/>
                <Button icon="ios-upload-outline" @click="exportData">导出</Button>
            </div>
        </Row>

        <Table ref="table" disabled-hover :columns="columns" :data="tableShowData">
        </Table>
    </div>
</template>
<script>

    import detail from '../../images/attendanceRecord.png'
    import Ajax from '@/libs/ajax.js'

    export default {
        data() {
            return {
                years: [],
                months: [
                    {
                        value: '1',
                        label: '1月'
                    },
                    {
                        value: '2',
                        label: '2月'
                    },
                    {
                        value: '3',
                        label: '3月'
                    },
                    {
                        value: '4',
                        label: '4月'
                    },
                    {
                        value: '5',
                        label: '5月'
                    },
                    {
                        value: '6',
                        label: '6月'
                    },
                    {
                        value: '7',
                        label: '7月'
                    },
                    {
                        value: '8',
                        label: '8月'
                    },
                    {
                        value: '9',
                        label: '9月'
                    },
                    {
                        value: '10',
                        label: '10月'
                    },
                    {
                        value: '11',
                        label: '11月'
                    },
                    {
                        value: '12',
                        label: '12月'
                    },
                ],
                year: "2017",
                month: "11",
                columns: [
                    {
                        title: "姓名",
                        key: "user_name",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "部门",
                        key: "user_dept",
                        minWidth: 100,
                        align: "center"
                    },
                    {
                        title: "正常天数",
                        key: "normal_count",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "迟到天数",
                        key: "late_count",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "早退天数",
                        key: "early_count",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "缺勤天数",
                        key: "absenteeism_count",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "异常天数",
                        key: "abnormal_count",
                        width: 100,
                        align: "center"
                    },
                    {
                        title: "查看",
                        align: "center",
                        width: 200,
                        render: (h, {row, column, index}) => {
                            let user_id = row.user_id
                            let user_name = row.user_name
                            return h(
                                "Button",
                                {
                                    style: {
                                        background: "url(" + detail + ") no-repeat",
                                        width: '30px',
                                        height: '30px',
                                        border: 'none',
                                    },
                                    on: {
                                        click: () =>
                                            this.jump(this.year, this.month, user_id, user_name)
                                    }
                                },
                            )

                        }
                    },
                ],
                tableData: [],
                queryWord: "",
                departId: -1,
                departments: [],
            }
        },
        computed: {
            tableShowData: function () {
                return this.tableData.filter((value, index) => {
                    return value.user_name.indexOf(this.queryWord.trim()) > -1
                })
            }
        },
        created() {
            let p1 = this.initYears()
            let p2 = this.initData()
            let p3 = this.loadDepartment()
            Promise.all([p1,p2,p3]).then(() => {
                    this.loadTableData()
            },()=>{
            })


        },
        methods: {
            initData() {
                return new Promise((resolve) => {
                    let date = new Date()
                    this.year = window.localStorage.year || date.getFullYear().toString()//DateUtils.format(date, 'yyyy')
                    this.month = window.localStorage.month || (date.getMonth()+1).toString()//DateUtils.format(date, 'MM')
                    this.departId = window.localStorage.departId || -1
                    resolve()
                })

            },
            initYears() {
                return new Promise((resolve,reject) => {
                    let currentYear = (new Date()).getFullYear()//Number(DateUtils.format(new Date(), 'yyyy'))
                    this.years = []
                    let temp = currentYear - 2;
                    for (; temp <= currentYear; ++temp) {
                        this.years.push({
                            value: temp + '',
                            label: temp + '年'
                        })
                    }
                    resolve()
                })

            },
            jump(year, month, userId, userName) {
                let query = {
                    year: year,
                    month: month,
                    userId: userId,
                    userName: userName
                };
                this.$router.push({
                    name: 'detail_index',
                    query: query
                });
            },
            exportData() {
                this.$refs.table.exportCsv({
                    filename: 'attendance data',
                    columns: this.columns.filter((col, index) => index < this.columns.length - 1),
                    data: this.data
                });
            },
            loadTableData() {
                let dateStr = ""
                if (this.month.length < 2) {
                    dateStr = this.year + "0" + this.month
                } else {
                    dateStr = this.year + this.month
                }
                if (this.departId == -1) {
                    return
                }
                Ajax.ajax({
                    url: `/api/attendance/query_stat?ad_dept=${this.departId}&ad_month=${dateStr}`,
                    method: 'get',
                }).then(res => {
                    if (res.data.code == '0') {
                        this.tableData = res.data.data;
                    }
                });
            },
            loadDepartment() {
                    Ajax.ajax({
                        url: 'api/config/query?type=0',
                        method: 'get'
                    }).then(res => {
                        return new Promise((resolve,reject)=>{
                            if (res.data.code == '0') {
                                this.departments  = [{
                                    label:"不限",
                                    value:"all"
                                }].concat(res.data.data||[])
                                resolve()
                            }else{
                                reject()
                            }
                        })

                    });

            },
        },
        watch: {
            year() {
                window.localStorage.setItem("year", this.year)
            },
            month() {
                window.localStorage.setItem("month", this.month)
            },
            departId() {
                this.departId = this.departId || -1
                window.localStorage.setItem("departId", this.departId);
            }

        }

    }

</script>